<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
        padding: 8px;
        width: 180px;
    }
    .blue{
        background-color: red;
    }
    .larger{
        font-size: 30px;
    }
    .green{
        background-color: aquamarine;
    }
    </style>
</head>
<body>
    <form>
        <input type="checkbox" name="ch" checked="checked" id="aa" abc="abc"/>
        <input type="checkbox" name="ch" id="bb">
    </form>
      

    <h3>css()方法设置元素样式</h3>
    <div id="conBlue" class="blue larger"> 天蓝色</div>
    <div id="conRed">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>
    <div id="add" style="border: 1px solid #000;">

        11111111111
    </div>
</body>
</html>
<script src="./jquery.min.js"></script>
<script>
    /*
        1操作元素属性:  1.1获取属性    
                            属性分类 固有属性元素本身就要的属性(id name class style)
                            返回值boolearn的属性 checked selected disabled
                            自定义属性 用户自己定义的属性 
                        1.2设置属性 
                            attr("属性名","属性值")
                            prop("属性名","属性值")  操作不了固有属性 
                        1.3移除属性
                            removeAttr("属性名")

        2操作元素样式   
        4操作元素内容
        5创建元素 
        6添加元素 
        7删除元素
        8遍历元素 
    */
  //1 
    //attr props 操作元素的属性 获取属性 
    //attr("属性名") prop("属性名")
     
    //固有属性
    var name = $("#aa").attr("name")    //固有属性这两方法都可以拿到 
     console.log(name)                  //ch
    var name2 = $("#aa").prop("name")
    console.log(name2)                  //ch

    //返回值是 布尔的属性                 
    var ck1 = $("#aa").attr("checked")   // 使用attr返回的是 设置的&&undefined
    var ck2 = $("#aa").prop("checked")   // 使用prop返回的是 true&&false 
    console.log(ck1)                     //checked
    console.log(ck2)                     //true

    //自定义属性 
    var abc1 = $("#aa").attr("abc")
    var abc2 = $("#aa").prop("abc")
    console.log(abc1)                    //abc
    console.log(abc2)                    //undefined 
    //区别 ？ 
            // 如果是固有属性 attr()和prop()方法均可操作
            // 如果是自定义属性attr可获取而prop不可操作 
            // 如果返回值是布尔类型 若设置了属性attr 返回具体的值 prop返回true  若未设置attr返回undefined prop返回false 


 //2 设置属性 
        //固有属性                        //都有效 
        $("#aa").attr("value","1")
        $("#bb").prop("value","2")  
        //返回值是布尔值的 
        $("#bb").attr("checked","checked") //被选中了 
        $("#bb").prop("checked","false")
        //自定义属性 
        $("#aa").attr("uname","admin")
        $("#bb").prop("unage","19")         //无 操作不了固有属性 

 //3 移除属性 
        $("#aa").removeAttr("checked")
    //如果属性的类型是布尔 则使用prop方法 否则使用attr方法 
    /*
            for(let i=0;i<4;i++){
                console.log(area4img)
               $("#area4_"+i+" img").attr('src','../../'+area4img[i]['pictures']['img1'])
            }
    */



//二 操作元素的样式 
    /*  attr("class") 获取class属性的值 即样式名称 
        attr("class","样式名") 修改calss属性值 修改样式      设置演示原本的样式被覆盖掉 
        addClass("样式名")  添加样式名称
        css()              添加具体样式             css({XXX})
        removeClass("样式名") 移除样式名称 
        */
    
            
    //获取元素的样式名         
        var cla = $("#conBlue").attr("class")
        console.log(cla)  //blue larger
    //设置元素样式 
        $("#conBlue").attr("class","green" )        
            


//操作元素的内容  
    /*
    html()   获取元素的内容  包含html标签 非表单元素 
    html("") 获取元素的内容  包含html标签 非表单元素
    text()   获取元素文本内容 不识别html标签 非表单   解析不了标签 只解析文本  
    text("") 设置元素的文本内容 不识别html标签 非表单  
    val()    获取元素的值 (表单元素)
    val("")  设置元素的值 (表单元素)
                
    */
    //表单元素  
    //文本text 密码框password 单选框radio 复选框checked 隐藏hidden 文本域textrea 下拉select
    //非表单元素
    //div spnn h table tr td   
    
    
//创建元素 
    //$("元素内容")
      //添加元素 
            // 前追加子元素 
                //指定元素.propend(内容)      在指定元素的内部的最前面追加内容 内容可以是字符串htmljq
                //$(内容).prependTo(指定元素) 把内容追加到指定元素内部的最前面 

            // 后追加子元素 
                 //指定元素.apppend(内容)      在指定元素的内部的最后面追加内容 内容可以是字符串htmljq
                //$(内容).apppendTo(指定元素) 把内容追加到指定元素内部的最后面 
            
            // 前追加同级元素
                 //before
                 //在指定元素的前面追加内容      
            // 后追加统计元素  
                 //after  指定元素的后面
            

    //$("<p>this is paragraph</p>")
    var p = "<p>这是一个p元素 </p>"             //str黑色 
    $("#add").prepend(p)
    var p2 = "<span> ADDDDDDDDDDDDDDDDDDD</span>"
    $(p2).prependTo($("#add"))
    

    
</script>